<template>
    <div class="wrap">
        <head-title :title="headText" @callback="onClickLeft"></head-title>
		<div class="wrapbd ordDetial" v-show="orderDet.show == 'buy'">
			<p>你向{{orderDet.seller_name}}购买{{orderDet.num}}个{{orderDet.b_type == 1 ? '构树链':'构树苗'}}</p>
			<ul class="recordnav">
                <label>订单明细</label>
				<li><span class="left">订单号</span><span class="right">{{orderDet.order_no}}</span></li>
				<li><span class="left">单价</span><span class="right">{{orderDet.unit_price}}</span></li>
				<li><span class="left">数量</span><span class="right">{{orderDet.num | nubFixed}}</span></li>
				<li><span class="left">总价</span><span class="right">{{orderDet.total_price | nubFixed}}</span></li>
			</ul>
			<ul class="recordnav">
                <label>支付方式</label>
				<li v-if="orderDet.pay_group.alipay"><span class="left">支付宝</span><span class="right">{{orderDet.pay_group.alipay}}</span></li>
				<li v-if="orderDet.pay_group.wechat"><span class="left">微信</span><span class="right">{{orderDet.pay_group.wechat}}</span></li>
				<!-- <li v-if="orderDet.pay_group.default_bank"><span class="left">银行卡</span><span class="right">查看 <i class="fa fa-angle-right fa-lg" aria-hidden="true"></i></span></li> -->
            </ul>
            <collapse v-model="activeNames" v-if="orderDet.pay_group.default_bank">
                <collapse-item title="银行卡" name="2">
                    开户号：{{orderDet.pay_group.default_bank.bank_no}}<br>
                    开户名：{{orderDet.pay_group.default_bank.account_name}}<br>
                    开户行：{{orderDet.pay_group.default_bank.bank_name}}<br>
                    支 行：{{orderDet.pay_group.default_bank.bank_branch_name}}<br>
                    地 址：{{orderDet.pay_group.default_bank.bank_address}}<br>
                </collapse-item>
            </collapse>
			<ul class="recordnav">
                <label>联系方式</label>
				<li v-if="orderDet.contact_group.alipay"><span class="left">支付宝</span><span class="right">{{orderDet.contact_group.alipay}}</span></li>
				<li v-if="orderDet.contact_group.wechat"><span class="left">微信</span><span class="right">{{orderDet.contact_group.wechat}}</span></li>
				<li v-if="orderDet.contact_group.moble"><span class="left">手机号</span><span class="right">{{orderDet.contact_group.moble}}</span></li>
            </ul>
            <b>等待支付：订单支付时间剩余<label class="red">{{minu}}分{{secs}}秒</label>，付款参考号：{{orderDet.random}}，收款成功后点击释放货币按钮</b>
            <div class="tip" v-if="orderDet.status == 2 || orderDet.status == 3">
                <span @click="confirmOrd(4)">确认支付</span><span @click="cancelOrd(6)">取消订单</span>
            </div>
            <div class="tip" v-if="orderDet.status == 4"><span style="width:100%">待释放</span></div>
            <div class="tip" v-if="orderDet.status == 5"><span style="width:100%">交易完成</span></div>            
		</div>
		<div class="wrapbd" v-show="orderDet.show == 'sell'">
			<p>你向{{orderDet.buyer_name}}出售{{orderDet.num}}个{{orderDet.b_type == 1 ? '构树链':'构树苗'}}，另收手续费用{{orderDet.commission}}个{{orderDet.b_type == 1 ? '构树链':'构树苗'}}</p>
			<ul class="recordnav">
                <label>订单明细</label>
				<li><span class="left">订单号</span><span class="right">{{orderDet.order_no}}</span></li>
				<li><span class="left">单价</span><span class="right">{{orderDet.unit_price}}</span></li>
				<li><span class="left">数量</span><span class="right">{{orderDet.num | nubFixed}}</span></li>
				<li><span class="left">总价</span><span class="right">{{orderDet.total_price | nubFixed}}</span></li>
			</ul>
			<ul class="recordnav">
                <label>支付方式</label>
				<li v-if="orderDet.pay_group.alipay"><span class="left">支付宝</span><span class="right">{{orderDet.pay_group.alipay}}</span></li>
				<li v-if="orderDet.pay_group.wechat"><span class="left">微信</span><span class="right">{{orderDet.pay_group.wechat}}</span></li>
				<!-- <li v-if="orderDet.pay_group.default_bank"><span class="left">银行卡</span><span class="right">查看 <i class="fa fa-angle-right fa-lg" aria-hidden="true"></i></span></li> -->
            </ul>
            <collapse v-model="activeNames" v-if="orderDet.pay_group.default_bank">
                <collapse-item title="银行卡" name="2">
                    开户号：{{orderDet.pay_group.default_bank.bank_no}}<br>
                    开户名：{{orderDet.pay_group.default_bank.account_name}}<br>
                    开户行：{{orderDet.pay_group.default_bank.bank_name}}<br>
                    支 行：{{orderDet.pay_group.default_bank.bank_branch_name}}<br>
                    地 址：{{orderDet.pay_group.default_bank.bank_no}}<br>
                </collapse-item>
            </collapse>
			<ul class="recordnav">
                <label>联系方式</label>
				<li v-if="orderDet.contact_group.alipay"><span class="left">支付宝</span><span class="right">{{orderDet.contact_group.alipay}}</span></li>
				<li v-if="orderDet.contact_group.wechat"><span class="left">微信</span><span class="right">{{orderDet.contact_group.wechat}}</span></li>
				<li v-if="orderDet.contact_group.moble"><span class="left">手机号</span><span class="right">{{orderDet.contact_group.moble}}</span></li>
            </ul>
            <b>等待支付：订单支付时间剩余<label class="red">{{minu}}分{{secs}}秒</label>，付款参考号：{{orderDet.random}}，收款成功后点击释放货币按钮</b>
            <div class="tip" v-if="orderDet.status == 2 || orderDet.status == 3"><span>待买家支付</span><span @click="cancelOrd(7)">取消订单</span></div>
            <div class="tip" v-if="orderDet.status == 4"><span style="width:100%" @click="confirmOrd(5)">释放货币</span></div>
            <div class="tip" v-if="orderDet.status == 5"><span style="width:100%">交易完成</span></div>
		</div>
        <div class="passwodInt" v-show="psdType">
            <password-input :value="payPsd" info="密码为 6 位数字" @focus="showKeyboard = true" />
            <number-keyboard :show="showKeyboard" @input="onInput" @delete="onDelete" @blur="showKeyboard = true"/>
        </div>
        <div class="fade" v-show="psdType" @click="psdType = false"></div>
    </div>
</template>
<script>
    import HeadTitle from "./../../components/title.vue";   
    import {PasswordInput, NumberKeyboard, Dialog, Collapse, CollapseItem} from 'vant';
    export default {
        data(){
            return {
                headText:'订单交易',
                activeNames:[],
                orderDet:{
                    contact_group:{
                        alipay:'',
                        moble:'',
                        wechat:'',
                    },
                    pay_group:{
                        alipay:'',
                        default_bank:{},
                        wechat:'',
                    }
                }, //后台数据 默认为空对象
                paytypeArr:[],  //支付方式 默认为空数组
                payObj: { a_1: '微信', a_2: '支付宝', a_3: '银行卡'}, 
                pay_type: '',  //支付方式
                countTime: '',  //时间戳
                minu:'',  //分
                secs:'',  //秒
                payPsd:'',   //支付密码
                psdType:false,  //隐藏支付密码界面
                showKeyboard:true,
                operateId:'',
                status:'',  //状态值
            }
        },
        mounted(){
            this.initialize();
        },
        methods:{
            //返回
            onClickLeft () { this.$router.go(-1)},
            //获取数据
            initialize(){
                let _this = this;
                this.paytypeArr = [];  //清空
                this.Tools.AXIOS({
                    url: 'trade/detail',
                    transformRequest:{
                        order_no: this.$route.query.ordid,
                    },
                    success:(res)=>{
                        let payType = '';
                        _this.status = res.data.data.status;
                        payType = res.data.data.pay_type;   //获取支付方式
                        payType.split(',').forEach((key) => {  //将字符串转成数组，再循环出来获取key值
                            let k = 'a_' + key.toString();
                            _this.paytypeArr.push(_this.payObj[k]);
                        });
                        _this.orderDet = res.data.data;
                        _this.pay_type = _this.paytypeArr.join(',')
                        _this.countTime = res.data.data.count_down_time;   //获取时间戳
                        _this.minu = parseInt(_this.countTime / 60);   //分
                        _this.secs = _this.countTime % 60;   //秒
                        _this.countCodeTime();
                    },
                    error(res){}
                })    
            },
            //取消订单
            cancelOrd(typeId){
                let _this = this;
                Dialog.confirm({
                    title: '温馨提示',
                    message: '确认取消订单？',
                }).then(() => {
                    this.Tools.AXIOS({
                        url: 'trade/operate',
                        transformRequest:{
                            order_no: this.orderDet.order_no,
                            operate_type: typeId,
                        },
                        success: function (res) {
                            _this.$toast.success('订单已取消');
                            setTimeout(function(){
                                _this.$router.push({path:'ltrade'});
                            },3000)
                        },error(res){}
                    })    
                });
            },
            //订单操作接口 确认支付/释放货币
            confirmOrd(id){
                this.psdType = true;  //调起 支付密码 页面
                this.operateId = id;  //类型ID
            },
            //输入支付密码
            onInput(key) {
                var _this = this;
                this.payPsd = (this.payPsd + key).slice(0, 6);
                if(this.payPsd.length == 6){
                    this.psdType = false;
                    this.Tools.AXIOS({    // 确认支付,释放货币
                        url: 'trade/operate',
                        transformRequest:{
                            order_no: this.orderDet.order_no,
                            operate_type: this.operateId,
                            pay_pwd: this.payPsd,
                        },
                        success: function (res) {
                            _this.operateId == 4 ? _this.$toast.success('已支付') : _this.operateId == 5 ?_this.$toast.success('已释放') : _this.$toast.success('非法操作');
                            _this.initialize();
                        },error(res){
                            _this.payPsd= '',   //清空
                            _this.disableBtn = false;
                        }
                    })
                }
            },
            //删除支付密码
            onDelete() {
                this.payPsd = this.payPsd.slice(0, this.payPsd.length - 1);
            },
            //倒计时
            countCodeTime:function () {
                let _this = this;
                let interval = setInterval(function () {
                    if(_this.countTime == 0){
                        clearInterval(interval);
                    }else{
                        _this.countTime --;
                        _this.minu = parseInt(_this.countTime / 60);   //分
                        _this.secs = _this.countTime % 60;   //秒
                    }
                },1000)
            },
        },
        components:{
            HeadTitle,
            Dialog,
            PasswordInput, NumberKeyboard,
            Collapse, CollapseItem
        }
    }
</script>

<style scoped>
    .wrap{ position: absolute; width: 100%; background: #FCFCFC;}
    .wrap .wrapbd{ margin: 45px 0 0;}
	.wrap p{ padding: .4rem .5rem; font-size: .35rem;}
	.wrap b{ padding: .4rem ; margin:0 auto 2.5rem; background: #FCFCFC; font-size: .38rem; line-height: .7rem; display: block; font-weight: normal;}
    .recordnav{ overflow: hidden; padding: 0 .6rem; border-top: 1px solid #F1F1F1;}
    /* .recordnav:nth-last-of-type(1){ border-bottom: 1px solid #F1F1F1;} */
    .recordnav label{ font-weight: bold; margin: .3rem 0; display: block; margin-left: -.3rem;}
	.recordnav li{ margin: .35rem 0; overflow: hidden; font-size: .35rem; color: #666; display: block;}
	.recordnav li span:nth-child(1){ color: #666; }
    .recordnav li span:nth-of-type(2){ width: 80%; text-align: right;}
    .tip{ width: 100%; position: fixed; bottom: 0; left: 0; background: #F4F4F4; display: flex; border-top: 1px solid #E3E3E4;}
    .tip span{ width: 50%; text-align: center; font-size: .35rem; padding: .5rem 0; box-sizing: border-box;}.tip span:nth-of-type(1){ border-right: 1px solid #E3E3E4;}
    [class*=van-hairline]::after{ border: 0!important}
</style>